<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>对账统计</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="{{asset('/layuiadmin/layui/css/layui.css')}}" media="all">
  <link rel="stylesheet" href="{{asset('/layuiadmin/style/admin.css')}}" media="all">
  <style>
    .yname {
      font-size: 13px;
      color: #444;
    }

    .bj {
      width: 45px;
      height: 45px;
    }

    .logo {
      width: 45px;
      height: 45px;
    }
  </style>
</head>
<body>

<div class="layui-fluid">
  <!-- 筛选------------------------------------------------------------ -->
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <div class="layui-card"style="margin-top:50px">
        <div class="layui-card-header">对账统计</div>
        <div class="layui-card-body">
          <form class="layui-form layui-form-pane">
            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label">选择门店</label>
                <div class="layui-input-inline" id="shopList"></div>
              </div>
              <div class="layui-inline">
                <label class="layui-form-label">查询时间</label>
                <div class="layui-input-inline" style="width: 340px">
                  <input name="date" type="text" class="layui-input" id="searchDate" >
                </div>
              </div>
              <div class="layui-inline">
                <button class="layui-btn" lay-submit="" lay-filter="search">搜索</button>
                <button class="layui-btn" lay-submit="" lay-filter="reset">重置</button>
                <button class="layui-btn layui-btn-primary" lay-submit="" lay-filter="export">导出</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- 统计数据------------------------------------------------------------ -->
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <div class="layui-card" style="background-color: transparent;">
        <div class="layui-card-header">统计数据(*商家实收=交易金额-退款金额，实际净额=商家实收-结算手续费)</div>
      </div>
    </div>
  </div>
  <div class="layui-row layui-col-space15">
    <div class="layui-col-sm6 layui-col-md4"style="width:26%">
      <div class="layui-card"style="background: url({{asset('/school/images/yesterday_back.png')}}) center center / cover no-repeat;border-radius: 5px;">
        <div class="layui-card-header"style="border-bottom:none">
          商家实收
          <span class="layui-badge layui-bg-blue layuiadmin-badge">元</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list">
          <p class="layuiadmin-big-font acounts"style="font-size:25px" id="reality">0.00</p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md4"style="width:26%">
      <div class="layui-card"style="background: url({{asset('/school/images/yesterday_back.png')}}) center center / cover no-repeat;border-radius: 5px;">
        <div class="layui-card-header"style="border-bottom:none">
          手续费
          <span class="layui-badge layui-bg-red layuiadmin-badge">元</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list">
          <p class="layuiadmin-big-font acounts"style="font-size:25px"  id="commission">0.00</p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md4"style="width:26%">
      <div class="layui-card"style="background: url({{asset('/school/images/yesterday_back.png')}}) center center / cover no-repeat;border-radius: 5px;">
        <div class="layui-card-header"style="border-bottom:none">
          实际净额
          <span class="layui-badge layui-bg-black layuiadmin-badge">元</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list">
          <p class="layuiadmin-big-font acounts"style="font-size:25px" id="realityAmount">0.00</p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md4"style="width:26%">
      <div class="layui-card"style="background: url({{asset('/school/images/yesterday_back.png')}}) center center / cover no-repeat;border-radius: 5px;">
        <div class="layui-card-header"style="border-bottom:none">
          交易金额/笔数
          <span class="layui-badge layui-bg-orange layuiadmin-badge">元/笔</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list">
          <p class="layuiadmin-big-font acounts"style="font-size:25px" id="transaction">0.00/0</p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md4"style="width:26%">
      <div class="layui-card"style="background: url({{asset('/school/images/yesterday_back.png')}}) center center / cover no-repeat;border-radius: 5px;">
        <div class="layui-card-header"style="border-bottom:none">
          退款金额/笔数
          <span class="layui-badge layuiadmin-badge" style="background-color: #5FB878;color: #fff;">元/笔</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list">
          <p class="layuiadmin-big-font acounts"style="font-size:25px" id="refund">0.00/0</p>
        </div>
      </div>
    </div>
  </div>

  <div id="summaryList"></div>

</div>
</body>
<script id="template" type="text/html">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <div class="layui-card" style="background-color: transparent;display:flex">
        <div class="bj">
          <image class='logo' src="{logo}"></image>
        </div>
        <div class="layui-card-header">{title}</div>
      </div>
    </div>
  </div>
  <div class="layui-row layui-col-space15">
    <div class="layui-col-sm6 layui-col-md4"style="width:26%">
      <div class="layui-card" style="background: url({{asset('/school/images/before_week_back.png')}}) center center / cover no-repeat;border-radius: 5px;">
        <div class="layui-card-header"style="border-bottom:none">
          商家实收
          <span class="layui-badge layui-bg-blue layuiadmin-badge">元</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list">
          <p class="layuiadmin-big-font"style="font-size:25px">{reality}</p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md4"style="width:26%">
      <div class="layui-card" style="background: url({{asset('/school/images/before_week_back.png')}}) center center / cover no-repeat;border-radius: 5px;">
        <div class="layui-card-header"style="border-bottom:none">
          手续费
          <span class="layui-badge layui-bg-red layuiadmin-badge">元</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list">
          <p class="layuiadmin-big-font"style="font-size:25px">{commission}</p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md4"style="width:26%">
      <div class="layui-card" style="background: url({{asset('/school/images/before_week_back.png')}}) center center / cover no-repeat;border-radius: 5px;">
        <div class="layui-card-header"style="border-bottom:none">
          实际净额
          <span class="layui-badge layui-bg-black layuiadmin-badge">元</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list">
          <p class="layuiadmin-big-font"style="font-size:25px">{realityAmount}</p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md4"style="width:26%">
      <div class="layui-card" style="background: url({{asset('/school/images/before_week_back.png')}}) center center / cover no-repeat;border-radius: 5px;">
        <div class="layui-card-header"style="border-bottom:none">
          交易金额/笔数
          <span class="layui-badge layui-bg-green layuiadmin-badge">笔</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list">
          <p class="layuiadmin-big-font"style="font-size:25px">{transaction}</p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md4"style="width:26%">
      <div class="layui-card" style="background: url({{asset('/school/images/before_week_back.png')}}) center center / cover no-repeat;border-radius: 5px;">
        <div class="layui-card-header"style="border-bottom:none">
          退款金额/笔数
          <span class="layui-badge layuiadmin-badge" style="background-color: #5FB878;color: #fff;">元/笔</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list">
          <p class="layuiadmin-big-font"style="font-size:25px">{refund}</p>
        </div>
      </div>
    </div>
  </div>
</script>
<script type="text/javascript" src="{{asset('/layuiadmin/layui/layui.js')}}"></script>
<script type="text/javascript" >
  layui.config({
    base: "/layuiadmin/modules/extends/",
  }).extend({
    selectInput: "selectInput/selectInput",
  }).use(['laydate','table','selectInput'], function () {
    let token = localStorage.getItem("Publictoken");
    let $ = layui.$;
    let form = layui.form;
    let laydate = layui.laydate;
    let selectInput = layui.selectInput;
    let shopId = '';
    let logolist={
      'alipay':"{{asset('/mb/alipay.png')}}",
      'weixin':"{{asset('/mb/weixin.png')}}",
      'unionpay':"{{asset('/mb/yinlian.png')}}",
    };

    // 全量参数版本
    let shopList = selectInput.render({
      // 容器id，必传参数
      elem: '#shopList',
      name: 'shopId', // 渲染的input的name值
      layFilter: '', //同layui form参数lay-filter
      layVerify: '', //同layui form参数lay-verify
      layVerType: 'tips', // 同layui form参数lay-verType
      layReqText: '请填写文本', //同layui form参数lay-ReqText
      initValue: '', // 渲染初始化默认值
      hasSelectIcon: true,
      placeholder: '请输入门店名称', // 渲染的inputplaceholder值
      // 联想select的初始化本地值，数组格式，里面的对象属性必须为value，name，value是实际选中值，name是展示值，两者可以一样
      data: [],
      remoteSearch: true, // 是否启用远程搜索 默认是false，和远程搜索回调保存同步
      remoteMethod: function (value, cb) { // 远程搜索的回调函数
        // value 是input实施输入的value值
        // cb是回调处理函数，请在执行ajax搜索请求成功之后执行此回调函数
        //案例
        //这里如果val为空, 则不触发搜索
        let shopAjaxData = {l: 10, token}
        if (value.replace(/\s/g, "")!='') {
          shopAjaxData['store_name'] = value;
        }
        $.ajax({
          type: 'POST',
          url: '/api/merchant/store_lists',
          data: shopAjaxData,
          dataType: 'json',
          success: function (res) {
            let {data, status} = res;
            let result = [];
            data.forEach((item,index)=>{
              result.push({value: item.store_id, name: item.store_name});
            });
            return cb(result)
          },
          error: function (res) {
            layer.msg('系统错误');
          },
        });
        return false;
      }
    });

    shopList.on('itemSelect(shopList)', function (obj) {
      shopId = obj.data;
    });

    // laydate.render({
    //   elem: '#searchDate'
    //   ,type: 'datetime'
    //   ,range: '至'
    //   ,format: 'yyyy-MM-dd HH:mm:ss'
    //   ,min:'2023-06-01 00:00:00'
    //   ,max:'{{date('Y-m-d 23:59:59')}}'
    // });
    
    laydate.render({
      elem: '#searchDate'
      , type: 'datetime'
      , range: '至'
      , format: 'yyyy-MM-dd HH:mm:ss'
      , min: '2023-06-01 00:00:00'
      , max: '{{date('Y-m-d 23:59:59')}}'
      , extrabtns: [
        {id: 'today', text: '今日', range: [new Date(new Date().setDate(new Date().getDate())), new Date(new Date().setDate(new Date().getDate()))]},
        {
          id: 'yesterday',
          text: '昨日',
          range: [new Date(new Date().setDate(new Date().getDate() - 1)), new Date(new Date().setDate(new Date().getDate() - 1))]
        },
      ]
    });

    //搜索
    form.on('submit(search)', function (data) {
      let loading = layer.load(2);
      let {date} = data.field;
      $.ajax({
        type: 'POST',
        url: '/api/merchant/statistics',
        data: {date, shop_id: shopId, token},
        dataType: 'json',
        success: function (res) {
          layer.close(loading);
          if (res.code == 0) {
            let {summary, summary_list} = res.data
            let reality = (summary.amount - summary.refund_amount) / 100;
            let realityAmount = (parseInt(summary.amount - summary.refund_amount - summary.free) + parseInt(summary.refund_free)) / 100;
            let commission = (summary.free - summary.refund_free) / 100;
            let transaction = [(summary.amount / 100).toFixed(2), summary.total].join(' / ');
            let refund = [(summary.refund_amount / 100).toFixed(2), summary.refund_total].join(' / ');
            $('#reality').text(reality.toFixed(2));
            $('#commission').text(commission.toFixed(2));
            $('#realityAmount').text(realityAmount.toFixed(2));
            $('#transaction').text(transaction);
            $('#refund').text(refund);

            $('#summaryList').html('');
            if (summary_list) {
              $.each(summary_list, function (index, item) {
                let logo = logolist[index];
                let title = item.title;
                let reality = (item.amount - item.refund_amount) / 100;
                let realityAmount = (parseInt(item.amount - item.refund_amount - item.free) + parseInt(item.refund_free)) / 100;
                let commission = (item.free - item.refund_free) / 100;
                let transaction = [(item.amount / 100).toFixed(2), item.total].join(' / ');
                let refund = [(item.refund_amount / 100).toFixed(2), item.refund_total].join(' / ');
                let template = $('#template').html();
                let result = template
                        .replace('{logo}', logo)
                        .replace('{title}', title)
                        .replace('{reality}', reality)
                        .replace('{realityAmount}', realityAmount)
                        .replace('{commission}', commission)
                        .replace('{transaction}', transaction)
                        .replace('{refund}', refund);
                $('#summaryList').append(result)
              });
            }
          } else {
            layer.msg(res.msg);
          }
        },
        error: function (res) {
          layer.close(loading);
          layer.msg('系统错误');
        },
      });
      return false;
    });

    //重置
    form.on('submit(reset)', function (data) {
      shopId='';
      shopList.emptyValue();
      $('#searchDate').value('');
      return false;
    });

    //导出
    form.on('submit(export)', function (data) {
      let {date} = data.field;
      let loading = layer.load(2);
      $.ajax({
        type: 'POST',
        url: '/api/merchant/statisticsExport',
        data: {date, shop_id: shopId, token},
        dataType: 'json',
        success: function (res) {
          layer.close(loading);
          if (res.code == 0) {
            layer.open({
              content: "地址：" + res.data.url + " <br/><a href='" + res.data.url + "' target='_blank' style='color: #00a3fe' >点击下载</a> ",
            });
          } else {
            layer.msg(res.msg);
          }
        },
        error: function (res) {
          layer.close(loading);
          layer.msg('系统错误');
        },
      });
      return false;
    });

    $(function(){
      $.ajax({
        type: 'POST',
        url: '/api/merchant/store_lists',
        data: {l: 100, token},
        dataType: 'json',
        success: function (res) {
          let {data, status} = res;
          let result = [];
          data.forEach((item,index)=>{
            result.push({value: item.store_id, name: item.store_name});
          });
          shopList.addSelect(result);
          shopList.showElem();
        },
        error: function (res) {
        },
      });
    });

  });
</script>

</html>